<template>
    <div class="safetyCenter">
        <div class="header-title">
            <span @click="$router.push({name:'home'})" class="mint-toast-icon mintui mintui-back"></span>
            <span>{{$t('SecurityCenter.securityCenter')}}</span>
            <span></span>
        </div>
        <div>
            <div v-show="grade=='1'?true:false" class="grade">
                <p>
                    {{$t('SecurityCenter.securityLevel')}}
                    <span>{{$t('SecurityCenter.low')}}</span>
                </p>
                <div>
                    <div></div>
                </div>
                <p>{{$t('SecurityCenter.attention')}}</p>
            </div>
            <div v-show="grade=='2'?true:false" class="grade">
                <p>
                    {{$t('SecurityCenter.securityLevel')}}
                    <span>{{$t('SecurityCenter.medium')}}</span>
                </p>
                <div>
                    <div style="width:66.66%"></div>
                </div>
            </div>
            <div v-show="grade>'3'?true:false" class="grade">
                <p>
                    {{$t('SecurityCenter.securityLevel')}}
                    <span>{{$t('SecurityCenter.high')}}</span>
                </p>
                <div>
                    <div style="width:100%"></div>
                </div>
            </div>
        </div>
        <div class="list-input">
            <div v-if="centerMsg.phoneNo == '0'?true:false" class="input-area" @click="$router.push({name:'phoneBinding'})">
                <span>{{$t('SecurityCenter.mobile')}}</span>
                <div>
                    <span>{{$t('SecurityCenter.notBound')}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div v-else class="input-area" @click="$router.push({name:'phoneCheck'})">
                <span>{{$t('SecurityCenter.mobile')}}</span>
                <div>
                    <span>{{centerMsg.phoneNo}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div v-if="centerMsg.mailbox == '0'?true:false" class="input-area" @click="$router.push({name:'emailBinding'})">
                <span>{{$t('SecurityCenter.mailbox')}}</span>
                <div>
                    <span>{{$t('SecurityCenter.notBound')}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div v-else class="input-area" @click="$router.push({name:'emailCheck'})">
                <span>{{$t('SecurityCenter.mailbox')}}</span>
                <div>
                    <span>{{centerMsg.mailbox}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div v-if="centerMsg.cardNum == '0'?true:false" class="input-area" @click="$router.push({name:'authentication'})">
                <span>{{$t('SecurityCenter.IdNumber')}}</span>
                <div>
                    <span>
                        {{$t('SecurityCenter.notBound')}}
                        <span v-show="false" class="fa fa-angle-right"></span>
                    </span>
                </div>
            </div>
            <div v-else class="input-area">
                <span>{{$t('SecurityCenter.IdNumber')}}</span>
                <div>
                    <span>
                        {{centerMsg.cardNum}}
                        <span v-show="false" class="fa fa-angle-right"></span>
                    </span>
                </div>
            </div>
            <div
                v-if="centerMsg.tradePassword == '0'?true:false"
                class="input-area"
                @click="$router.push({name:'changeDealPassword',query:{titleType:'2'}})"
            >
                <span>{{$t('SecurityCenter.PaymentCode')}}</span>
                <div>
                    <span>{{$t('SecurityCenter.notSet')}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div
                v-else
                class="input-area"
                @click="$router.push({name:'safetyVerificationCode',query:{urlAddress:'changeDealPassword',titleType:'1'}})"
            >
                <span>{{$t('SecurityCenter.PaymentCode')}}</span>
                <div>
                    <span>{{$t('SecurityCenter.modification')}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div v-if="centerMsg.loginPassword == '0'?true:false" class="input-area" @click="$router.push({name:'changeSetPassword',query:{titleType:'2'}})">
                <span>{{$t('SecurityCenter.LoginPassword')}}</span>
                <div>
                    <span>{{$t('SecurityCenter.notSet')}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
            <div v-else class="input-area" @click="$router.push({name:'changePassword'})">
                <span>{{$t('SecurityCenter.LoginPassword')}}</span>
                <div>
                    <span>{{$t('SecurityCenter.modification')}}</span>
                    <span class="fa fa-angle-right"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            grade: "1",
            token:JSON.parse(this.$store.state.userMsg).token,
            centerMsg:[],
        };
    },
    created(){
        // this.token = JSON.parse(this.$store.state.userMsg).token
        // console.log(this.token)
        this.safeCenter();
        
        
    },
    methods:{
        safeCenter(){
            this.$axios.get(this.address.basisInformation,{params:{
                token:this.token
            }}).then(res => {
                console.log(res.data)
                if(res.data.code == 200){
                    this.centerMsg = res.data.data
                    for(var i=0;i<Object.keys(this.centerMsg).length-1;i++){
                        if(this.centerMsg[Object.keys(this.centerMsg)[i]] != '0'){
                            this.grade++
                        }
                    }
                    
                    
                }
            })
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    border-bottom: 1px solid #eee;
}
.list-input {
    padding: 15px;
    div:last-child {
        border-bottom: none;
    }
}
.grade {
    padding: 15px 15px 0;
    p:first-child {
        font-size: 15px;
        color: @blackColor8;
        font-weight: bold;
        span {
            color: #ff5353;
            margin-left: 10px;
        }
    }
    div {
        width: 100%;
        height: 4px;
        background-color: @bgcolor3;
        margin: 6px 0;
        div {
            width: 33.33%;
            height: 100%;
            background-color: #ff5353;
        }
    }
    p {
        color: #ff5353;
        font-size: 12px;
    }
}
</style>
